<template>
  <div class="nnn-contain">
    <div class="cash">
      <!-- 表单 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="用户ID/昵称">
              <el-input v-model="formInline.user" placeholder="用户ID/昵称" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="日期">
              <el-date-picker
                v-model="value1"
                start-placeholder="开始日期"
              />
              至
              <el-date-picker
                v-model="value2"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <template>
              <el-button size="medium">查询</el-button>
              <el-button size="medium">重置</el-button>
            </template>
          </el-col>
        </el-row>
      </el-form>
      <!--/ 表单 -->
    </div>
    <el-card class="hr-block">
      <el-table
        :data="list"
        style="width: 100%"
      >
        <el-table-column prop="id" label="用户ID" />
        <el-table-column prop="name" label="用户昵称" />
        <el-table-column prop="telephone" label="联系电话" />
        <el-table-column prop="dianpu" label="商圈店铺数量" />
        <el-table-column prop="dingdan" label="订单量" />
        <el-table-column prop="sales" label="消费额" />
        <el-table-column prop="pinci" label="消费频次" />
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick(scope.row)"
            >消费分析</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Nnn',
  components: {},
  props: {},
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      value1: '',

      showDialog: true,
      page: {
        page: 1,
        total: 0,
        pageSize: 10
      },
      list: [{
        id: '1654482',
        name: '老大',
        dingdan: 'xx',
        dianpu: 'xxx',
        telephone: '13589451547',
        level: '3',
        sales: 'xxxxx.xx',
        pinci: 'x次/天',
        operate: '删除'
      }, {
        id: '1654484',
        name: '老二',
        dingdan: 'xx',
        dianpu: 'xxx',
        telephone: '13589451547',
        level: '3',
        sales: 'xxxxx.xx',
        pinci: 'x次/天',
        operate: '删除'
      }, {
        id: '1654481',
        name: '老三',
        dingdan: 'xx',
        dianpu: 'xxx',
        telephone: '13589451547',
        level: '3',
        sales: 'xxxxx.xx',
        pinci: 'x次/天',
        operate: '删除'
      }, {
        id: '1654483',
        name: '老四',
        dingdan: 'xx',
        dianpu: 'xxx',
        telephone: '13589451547',
        level: '3',
        sales: 'xxxxx.xx',
        pinci: 'x次/天',
        operate: '删除'
      }]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped lang="scss">
  .cash {
    margin: 8px;
    border-radius: 4px;
    border: 1px solid black;
    padding: 20px;
  }
</style>
